<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一朵 - 购物车</title>
    <!-- swiper-2.7css -->
    <link rel="stylesheet" href="__STATIC__/index/js/swiper/idangerous.swiper.css">
    <!-- swiper-2.7js -->
    <script src="__STATIC__/index/js/swiper/idangerous.swiper.min.js"></script>
    <!-- jquery-3.2.1引用 -->
    <script src="__STATIC__/index/js/global/jquery-3.2.1.min.js"></script>
    <!-- 阿里巴巴矢量图库 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_561814_qyaihbkw7dx3whfr.css">
    <!-- 公共头部 脚部 -->
    <link rel="stylesheet" href="__STATIC__/index/css/global/global.css">
    <!-- 超过1200屏幕 -->
    <link rel="stylesheet" media="screen and (min-width: 1200px)" href="__STATIC__/index/css/car/car1200.css" />
    <!-- 1080-1200 -->
    <link rel="stylesheet" media="screen  and (min-width: 1080px) and (max-width: 1199px) " href="__STATIC__/index/css/car/car1080.css"
    />
    <!-- 960-1080 -->
    <link rel="stylesheet" media="screen  and (min-width: 960px) and (max-width: 1079px) " href="__STATIC__/index/css/car/car960.css"
    />
    <!-- 768-959 -->
    <link rel="stylesheet" media="screen  and (min-width: 768px) and (max-width: 959px) " href="__STATIC__/index/css/car/car768.css"
    />
    <!-- 568-767 -->
    <link rel="stylesheet" media="screen  and (min-width: 568px) and (max-width: 767px) " href="__STATIC__/index/css/car/car568.css"
    />
    <!-- 375-567 -->
    <link rel="stylesheet" media="screen  and (min-width: 375px) and (max-width: 567px) " href="__STATIC__/index/css/car/car375.css"
    />
    <!-- 小于375-->
    <link rel="stylesheet" media="screen  and (max-width: 374px) " href="__STATIC__/index/css/car/car320.css" />
    <!--引入layer-->
    <script src="__STATIC__/layer/layer.js"></script>
</head>

<body >
    <form action="{:url('MyCart/pre_create_order')}" method="post" id="form1">
    <div class="M">
        <div class="m-header">
            <div>
                <span onclick="go_back();">
                    <span class="iconfont icon-xiangzuo"></span>
                    返回
                </span>
                <span>购物车</span>
                <span>
                    {if condition="!empty($realname)"}
                    <a href="{:url('User/index')}" class="my">
                        {$realname}
                    </a>
                    {else /}
                    <a href="{:url('Login/loginin')}">登录</a>
                    <a href="{:url('Register/register')}">注册</a>
                    {/if}
                    <a href="{:url('MyCart/my_cart')}" class="car">
                        <span class="iconfont icon-gouwuche"></span>
                        <span>{$cart_num}</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="m-goods">
            {if condition="!empty($goods)"}
            {foreach name="goods" item="v"}
            <div class="m-goods-content">
                <div>
                    <label for="opt_{$v.spec_id}" class="xuanze zhong">
                        <input type="checkbox" id="opt_{$v.spec_id}" name="opt" checked onchange="m_selected(this,{$v.spec_id})">
                    </label>
                </div>
                <div>
                    <img src="{$v.logo}" alt="">
                </div>
                <div>
                    <p>{$v.name}</p>
                    <p>{$v.title}</p>
                </div>
                <div>
                    <input type="button" class="min" value="—" style="color: rgb(205, 205, 205);">
                    <input type="text" class="text_box" value="{$v.num}" readonly="value">
                    <input type="button" class="add" value="+">
                    <!-- 库存 -->
                    <input type="hidden" class="kucun" value="{$v.stock}">
                    <!-- 单价 -->
                    <input type="hidden" class="kucun" name="price" value="{if condition=' $v.is_member eq 0 '}{$v.price}{else /}{$v.member_price}{/if}">
                    <!--商品属性id-->
                    <input type="hidden" class="spec_id" value="{$v.spec_id}">
                </div>
                <div class="t_price">￥{$v.total_price}</div>
            </div>
            {/foreach}
            {/if}
        </div>
        {if condition="empty($goods)"}
        <div class="m-kong">
            <img src="__STATIC__/index/img/my/my.png" alt="">
            <p>这里什么都没有</p>
            <p>······</p>
        </div>
        {/if}
        <div class="m-float">
            <div>
                <span onclick="qk_cart()">
                    清空
                </span>
                <a href="javascript:;" onclick="return checkform();">结算</a>
                <span>订单总额:
                    <span>￥
                        <span class="final_amount">{$total_amount}</span>
                    </span>
                </span>
            </div>
        </div>
    </div>
    <div class="PC">
        {include file="public/p_header" /}
        <div class="pc-headline">
            <p>
                <span class="pc-gaoliang">
                    <span></span> 选择商品
                </span>
                <span>-------------</span>
                <span>
                    <span></span>确认订单</span>
                <span>-------------</span>
                <span>
                    <span></span>付款</span>
                <span>-------------</span>
                <span>
                    <span></span>交易完成</span>
            </p>
        </div>
        <div class="pc-explain">
            <div>
                <span>
                    <span>选择</span>
                    <span>商品</span>
                </span>
                <span>
                    <span>单价</span>
                    <span>数量</span>
                    <span>小计</span>
                    <span>操作</span>
                </span>
            </div>
        </div>
        {if condition="!empty($goods)"}
        <div class="pc-shangpin">
            {foreach name="goods" item="v"}
            <div>
                <div>
                    <div>
                        <label for="pc_opt_{$v.spec_id}" class="xuanze zhong pc_goods" data-id="{$v.spec_id}">
                            <input type="checkbox" name="ids[]" id="pc_opt_{$v.spec_id}" onchange="selected(this,{$v.spec_id});" checked value="{$v.spec_id}">
                        </label>
                    </div>
                    <div>
                        <img src="{$v.logo}" alt="">
                    </div>
                    <div>
                        <p>{$v.name}</p>
                        <p>{$v.title}</p>
                    </div>
                </div>
                <div id="pc_goods">
                    <div>
                        ￥{if condition="$v.is_member eq 0"}{$v.price}{else /}{$v.member_price}{/if}
                    </div>
                    <div>
                        <input type="button" class="min" value="—" style="color: rgb(205, 205, 205);" data-id="{$v.spec_id}">
                        <input type="text" class="text_box" value="{$v.num}" readonly="value">
                        <input type="button" class="add" value="+" data-id="{$v.spec_id}">
                        <!-- 库存 -->
                        <input type="hidden" class="kucun" value="{$v.stock}">
                        <!-- 单价 -->
                        <input type="hidden" class="kucun" name="single_price" value="{if condition=' $v.is_member eq 0 '}{$v.price}{else /}{$v.member_price}{/if}">
                        <!--商品属性id-->
                        <input type="hidden" class="spec_id" value="{$v.spec_id}">
                    </div>
                    <div class="t_price">
                        ￥{$v.total_price}
                    </div>
                    <div onclick="cancel(this,{$v.spec_id});">
                        <i class="iconfont icon-cuowu"></i>
                    </div>
                </div>
            </div>
            {/foreach}
        </div>
        {/if}
        {if condition="empty($goods)"}
        <div class="pc-kong">
            <img src="__STATIC__/index/img/my/my.png" alt="">
            <p>这里什么都没有</p>
            <p>······</p>
        </div>
        {/if}
        <div class="pc-zonge">
            <div>
                <span onclick="qk_cart()">清空</span>
                <a href="javascript:;" onclick="checkform()">
                    结算
                </a>
                <span>订单总额（不含运费）：
                    <span>￥
                        <span class="final_amount" id="pc_final_amount">{$total_amount}</span>
                    </span>
                </span>
                <span>共
                    <span class="all_num">{$total_num}</span>件商品</span>
            </div>
        </div>
        <div class="pc-goods-headline">
            推荐搭配
        </div>
        <div class="pc-goods">
            {foreach name="dp_goods" item="v"}
            <a href="{:url('GoodsList/goods_detail')}?id={$v.id}">
                <div class="pc-neirong-top">
                    <img src="{$v.logo}" alt="">
                </div>
                <div class="pc-neirong-bottom">
                    <p class="pc-headline-one">{$v.name}</p>
                    <p class="pc-zuanshi" {if condition="$v.member_level_id neq 4" } style="display: none;" {/if}>
                        <span>{$v.title} ￥{$v.member_price}</span>
                    </p>
                    <p class="pc-bojin" {if condition="$v.member_level_id neq 3" } style="display: none;" {/if}>
                        <span>{$v.title} ￥{$v.member_price}</span>
                    </p>
                    <p class="pc-huangjin" {if condition="$v.member_level_id neq 2" } style="display: none;" {/if}>
                        <span>{$v.title} ￥{$v.member_price}</span>
                    </p>
                    <p class="pc-wu" {if condition="$v.member_level_id neq 1" } style="display: none;" {/if}>
                        <span>普通会员 ￥{$v.price}</span>
                    </p>
                    <p class="pc-price">￥{$v.price} </p>
                </div>
            </a>
            {/foreach}
        </div>
        {include file="public/p_footer" /}
    </div>
    </form>
    <script>
        $(".add").click(function () {
            let kucun = $(this).next().val();
            let danjia = parseFloat($(this).next().next().val()).toFixed(2);
            let xianjia = $(this).parent().next();
            let final_amount = parseFloat($('.final_amount').text()).toFixed(4);
            let all_num = parseFloat($('.all_num').text()).toFixed(4);
            var t = $(this).parent().find('input[class*=text_box]');
            if (parseInt(t.val()) + 1 > kucun) {
                $(this).css("color", "#CDCDCD");
                return;
            }
            console.log(danjia);
            t.val(parseInt(t.val()) + 1);
            xianjia.html('￥' + t.val() * danjia);
            if (parseInt(t.val()) > 1) {
                $(this).prev().prev().css("color", "#219dfd");
            }

            all_num = parseInt(parseInt(all_num)+parseInt(1));
            final_amount = parseFloat(parseFloat(final_amount)+parseFloat(danjia)).toFixed(4);
            final_amount = final_amount.substring(0,final_amount.indexOf(".") + 3);
            $('.final_amount').text(final_amount);
            $('.all_num').text(all_num);

            var total_price = $(this).parent().parent().find('.t_price').text();        //单个商品总价
            var id = $(this).attr('data-id');           //商品属性id
            var x = $('#opt_'+id).parent().parent().parent();
            x.find('.t_price').text(total_price);
            x.find('.text_box').val(t.val());

            var x = parseInt(t.val());
            if (parseInt(t.val()) + 1 > kucun) {
                var total_price = $(this).parent().parent().find('.t_price').text();        //单个商品总价
                var id = $(this).attr('data-id');           //商品属性id
                var x = $('#opt_'+id).parent().parent().parent();
                x.find('.t_price').text(total_price);
                x.find('.text_box').val(t.val());

                $(this).css("color", "#CDCDCD");
                return;
            }


        });

        $(".min").click(function () {
            let kucun = $(this).next().next().next().val();
            let danjia = parseFloat($(this).next().next().next().next().val()).toFixed(2);
            let xianjia = $(this).parent().next();
            let final_amount = parseFloat($('.final_amount').text()).toFixed(4);
            let all_num = parseFloat($('.all_num').text()).toFixed(2);
            var t = $(this).parent().find("input[class*=text_box]");
            if (parseInt(t.val()) - 1 < kucun) {
                $(this).next().next().css("color", "#219dfd");
            }
            t.val(parseInt(t.val()) - 1);

            var x = parseInt(t.val());
            if(x>=1){
                all_num = parseInt(parseInt(all_num)-parseInt(1));
                final_amount = parseFloat(parseFloat(final_amount)-parseFloat(danjia)).toFixed(4);
                final_amount = final_amount.substring(0,final_amount.indexOf(".") + 3);
                $('.final_amount').text(final_amount);
                $('.all_num').text(all_num);
            }
            xianjia.html('￥' + t.val() * danjia);

            var total_price = $(this).parent().parent().find('.t_price').text();        //单个商品总价
            var id = $(this).attr('data-id');           //商品属性id
            var x = $('#opt_'+id).parent().parent().parent();
            x.find('.t_price').text(total_price);
            x.find('.text_box').val(t.val());

            if (parseInt(t.val()) < 2) {
                t.val(1);
                xianjia.html('￥' + t.val() * danjia);
                $(this).css("color", "#CDCDCD");
                var total_price = $(this).parent().parent().find('.t_price').text();        //单个商品总价
                var id = $(this).attr('data-id');           //商品属性id
                var x = $('#opt_'+id).parent().parent().parent();
                x.find('.t_price').text(total_price);
                x.find('.text_box').val(t.val());
            }

        });

        $('.xuanze').click(function () {
            if ($(this).hasClass('zhong')) {
                $(this).removeClass('zhong');
            } else {
                $(this).addClass('zhong');
            }
        });
    </script>
    <script>
        /**
         * 选择商品
         * @param obj
         */
        function selected(obj,id){
            var t = $(obj).parent().parent().parent().parent();
//            var num = parseInt(t.find("input[class*=text_box]").val()).toFixed(2);         //商品数量
//            var single_price = parseFloat(t.find("input[name=single_price]").text()).toFixed(2);       //商品单价
            var total_price = t.find(".t_price").text();                  //小计价格
            total_price=total_price.replace("￥","");

            var final_amount = parseFloat($('#pc_final_amount').text()).toFixed(4);        //商品最终交易价
console.log(final_amount);
            if($(obj).parent().hasClass('zhong')){          //移除选中
                $(obj).parent().removeClass('zhong');
                final_amount = parseFloat(parseFloat(final_amount)-parseFloat(total_price)).toFixed(4);
                final_amount = final_amount.substring(0,final_amount.indexOf(".") + 3);
                $('.final_amount').text(final_amount);
                $('#opt_'+id).parent().removeClass('zhong');
                $('#opt_'+id).attr('checked',false);
            }else{          //选中
                $(obj).parent().addClass('zhong');
                final_amount = parseFloat(parseFloat(final_amount)+parseFloat(total_price)).toFixed(4);
                final_amount = final_amount.substring(0,final_amount.indexOf(".") + 3);
                $('.final_amount').text(final_amount);
                $('#opt_'+id).parent().addClass('zhong');
                $('#opt_'+id).attr('checked',true);
            }
        }
        /**
         * 移动端选择
         */
        function m_selected(obj,id){
            var t = $(obj).parent().parent().parent();
//            var num = parseInt(t.find("input[class*=text_box]").val()).toFixed(2);         //商品数量
//            var single_price = parseFloat(t.find("input[name=price]").val()).toFixed(2);       //商品单价
            var total_price = t.find(".t_price").text();                  //小计价格
            total_price=total_price.replace("￥","");

            var final_amount = parseFloat($('.final_amount').text()).toFixed(4);        //商品最终交易价
            if($(obj).parent().hasClass('zhong')){          //移除选中
                $(obj).parent().removeClass('zhong');
                final_amount = parseFloat(parseFloat(final_amount)-parseFloat(total_price)).toFixed(2);
                $('.final_amount').text(final_amount);
                $('#pc_opt_'+id).parent().removeClass('zhong');
                $('#pc_opt_'+id).attr('checked',false);
            }else{          //选中
                $(obj).parent().addClass('zhong');
                final_amount = parseFloat(parseFloat(final_amount)+parseFloat(total_price)).toFixed(2);
                $('.final_amount').text(final_amount);
                $('#pc_opt_'+id).parent().addClass('zhong');
                $('#pc_opt_'+id).attr('checked',true);
            }
        }

        /**
         * 删除购物车
         * @param obj
         * @param id    商品属性id
         */
        function cancel(obj, id) {
            $.post("{:url('MyCart/del')}",
                {
                    id: id
                },
                function (data) {
                    //              console.log(data);
                    if (data.code == 1) {
                        layer.msg('删除成功', {
                            icon: 1,
                            time: 1500,
                            shade: 0.1
                        }, function (index) {
                            layer.close(index);
                            location.reload();
                        });
                        return false;
                    } else {
                        layer.msg(data.msg, {
                            icon: 2,
                            time: 1500,
                            shade: 0.1
                        }, function (index) {
                            layer.close(index);
                            location.reload();
                        });
                        return false;
                    }
                }
            );
        }

        //        $(window).onload(function(){
        //            alert('sss');
        //            return false;
        //        })

        //        window.addEventListener('beforeunload', function(e) {
        //            alert('sss');
        //            return false;
        //        });
        window.onbeforeunload = confirmExit;
        function confirmExit() {
            save_cart();
            // 此地可以写你的业务代码
//            return 'sss';
        }
        /**
         * 关闭页面
         */
        function checkform(){
            var ids = '';
            var nums = new Array();
            var specs = new Array();

            $('input[class*=text_box]').each(function(){
                nums.push($(this).val());
            });

            $('input[class*=spec_id]').each(function(){
                specs.push($(this).val());
            });

            $.each($('.pc_goods'), function () {
                if ($(this).hasClass('zhong')) {
                    var id = $(this).attr('data-id'); //商品的属性id
                    ids += id + ',';
                }
            });

            $.post("{:url('MyCart/check_cart')}",
                {nums:nums,specs:specs,ids:ids},
                function(data){
                    if (data.code == 0) {
                        if (data.msg == -1) {
                            layer.msg('您目前还没有登录，请先去登录', {
                                icon: 2,
                                time: 1500,
                                shade: 0.1
                            }, function (index) {
                                layer.close(index);
                                //                                location.reload();
                                window.location.href = "{:url('Login/loginin')}";
                            });
                            return false;
                        } else {
                            layer.msg(data.msg, {
                                icon: 2,
                                time: 1500,
                                shade: 0.1
                            }, function (index) {
                                layer.close(index);
                                location.reload();
                            });
                            return false;
                        }
                    } else {
                        $('#form1').submit();
                    }
                }
            );
        }

        /**
         * 更新购物车，保存商品数量
         */
        function save_cart(){
            var nums = new Array();
            var specs = new Array();

            $('input[class*=text_box]').each(function(){
                nums.push($(this).val());
            });

            $('input[class*=spec_id]').each(function(){
                specs.push($(this).val());
            });

            $.post("{:url('MyCart/update_cart')}",
                {nums:nums,specs:specs},
                function(data){
//                    if(data.code == 1){
//                        layer.msg('清空成功', {
//                            icon: 1,
//                            time: 1500,
//                            shade: 0.1
//                        }, function (index) {
//                            layer.close(index);
//                        });
//                        return false;
//                    }
                }
            );
        }

        /**
         *  清空购物车
         */
        function qk_cart() {
            $.post("{:url('MyCart/qingkong')}",
                {
                    id: 1
                },
                function (data) {
                    //              console.log(data);
                    if (data.code == 1) {
                        layer.msg('清空成功', {
                            icon: 1,
                            time: 1500,
                            shade: 0.1
                        }, function (index) {
                            layer.close(index);
                            window.location.reload();
                        });
                        return false;
                    } else {
                        layer.msg(data.msg, {
                            icon: 1,
                            time: 1500,
                            shade: 0.1
                        }, function (index) {
                            layer.close(index);
                        });
                        return false;
                    }
                }
            );
        }

        /**
         * 返回上一页
         */
        function go_back() {
            window.history.go(-1); //返回上一页
        }
    </script>
</body>
</html>